<template>
    <view class="">
        <view class="u-flex time">
            <view class="t-box" @click="KStimeShow = true">
                <input type="text" v-model="startTime" placeholder="开始时间" disabled />
                <image src="../../static/icon/time_01.png" mode=""></image>
            </view>
            <view class="line"></view>
            <view class="t-box" @click="JStimeShow = true">
                <input type="text" v-model="endTime" placeholder="结束时间" disabled />
                <image src="../../static/icon/time_01.png" mode=""></image>
            </view>
            <view class="search" @click="doSearch">搜索</view>
        </view>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                startTime: '', //开始时间
                endTime: '', //结束时间
                timeParams: { //时间格式
                	year: true,
                	month: true,
                	day: true,
                	hour: false,
                	minute: false,
                	second: false
                },
            };
        },
        onLoad() {
            
        },
        methods: {
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.startTime = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 2) {
                    this.endTime = e.year + '-' + e.month + '-' + e.day;
            	}
            },
            // 搜索
            doSearch() {
                let time = {
                    startTime: this.startTime,
                    endTime: this.endTime
                }
                this.$emit('doSearch', time)
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #fff;
    }
    
    .time {
        width: 100%;
        padding: 20rpx 20rpx 30rpx;
        .t-box{
            flex: 1;
            height: fit-content;
            background-color: #f5f5f5;
            position: relative;
            padding-right: 70rpx;
            border-radius: 10rpx;
            
            image{
                display: block;
                width: 33rpx;
                height: 34rpx;
                position: absolute;
                top: 50%;
                right: 22rpx;
                margin-top: -19rpx;
            }
        }
    
        input {
            width: 100%;
            height: 70rpx;
            font-size: 28rpx;
            color: #333333;
            text-indent: 25rpx;
            line-height: 70rpx;
            padding-left: 10rpx;
        }
    
        .line {
            width: 16rpx;
            height: 4rpx;
            background-color: #ff4800;
            margin: 0 10rpx;
        }
    
        .search {
            font-size: 28rpx;
            color: #fff;
            line-height: 70rpx;
            background-color: #ff4800;
            border-radius: 10rpx;
            padding: 0 48rpx;
            margin-left: 20rpx;
        }
    }

</style>
